<template >

  <div id="app" class="homeWrap">
    <div  style="z-index:100;position: fixed;top: 0;left: 0px;box-shadow: 0 2px 4px rgba(24,23,23,12), 0 0 6px rgb(83,77,77);width: 100%">
      <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">


        <el-submenu index="2">
          <template slot="title"><i class="el-icon-user-solid"></i>我的</template>
          <div style="position: relative;left: 10px;">
            <i style="color: white">头像：</i> <el-avatar style="position: relative;top: 10px" :src="'http://127.0.0.1:9090/demo/'+this.topImg"></el-avatar>
          </div>
          <br>

          <el-menu-item style="color: #eeeeee" index="2-3" @click="reft">返回主页</el-menu-item>

          <br>
          <el-menu-item style="color: red" index="2-3" @click="write">注销</el-menu-item>
        </el-submenu>

        <el-menu-item :index="m.id+''" @click="getmenuid(m.id)" v-for="m in childMenus"><i :class="m.icon"></i>{{m.mname}}</el-menu-item>
        <!--      <el-menu-item index="3">消息中心</el-menu-item>-->
        <!--      <el-menu-item index="4"><a  target="_blank">订单管理</a></el-menu-item>-->


      </el-menu>
    </div>

    <div style="height: 70px;width: 100%">

    </div>

    <el-container style="height:100%">
      <el-aside
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              width="200px"  style="z-index:50;box-shadow: 0 2px 4px rgb(0,0,0), 0 0 6px rgb(0,0,0)">

        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false"><i class="el-icon-circle-plus">&nbsp;展开</i></el-radio-button>
          <el-radio-button :label="true"><i class="el-icon-remove">&nbsp;收起</i></el-radio-button>
        </el-radio-group >


        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" style="position: relative;top: -50px"  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu :index="m.id+''" v-for="m in childMenus02">
            <template slot="title">
              <i :class="m.icon"></i>
              <span slot="title" style="color: #bebec1">{{m.mname}}</span>
            </template>
            <el-menu-item-group >
              <el-menu-item v-for="ms in m.childMenus"  v-if="ms.childMenus == ''" :index="ms.id+''" @click="addTab(ms.mname,ms.linkUil)" size="small" >
                <span slot="title" style="font-size: 6px" :class="ms.icon" >{{ms.mname}}</span>
              </el-menu-item>

              <el-submenu v-if="mxs.childMenus != ''" :index="mxs.id+''" v-for="mxs in m.childMenus" >
                <template slot="title" >
                  <span :class="mxs.icon" style="font-size: 6px;position: relative;left: -12px" >{{mxs.mname}}</span>
                </template>
                <el-menu-item :index="mss.id+''" v-for="mss in mxs.childMenus"  @click="addTab(mss.mname,mss.linkUil)">
                  <span  slot="title" style="font-size: 1px" :class="mss.icon"  size="small">{{mss.mname}}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu-item-group>


          </el-submenu>

        </el-menu>

      </el-aside>
      <el-container>
        <el-header style="background-color:#e2e2e2;z-index:20;width:100%;box-shadow: 0 2px 4px rgb(0,0,0), 0 0 6px rgb(0,0,0)">
          <div>
            <el-tabs style="color: #323030; height: 300px; width: 100%;caret-color: transparent;"
                     v-model="editableTabsValue"  id="tabs"  type="card"  @tab-remove="removeTab">
              <br class="tab">
              <el-tab-pane
                      :key="editableTabs[0].name"
                      :label="editableTabs[0].title"
                      :name="editableTabs[0].name"
              >
                {{editableTabs[0].content}}
                <div><component ref="revenue" is="revenue" v-if="commercialState==1"></component></div>
                <div><component ref="supplier" is="supplier_home_page" v-if="supplierState==1"></component></div>

              </el-tab-pane>
              <el-tab-pane  closable
                            v-for="(item, index) in editableTabs.slice(1)"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"

              >
                <component :is="item.content"></component>
              </el-tab-pane>

            </el-tabs>
          </div>

        </el-header>
        <el-main>

        </el-main>
      </el-container>
    </el-container>

  </div>
</template>


<script>
  //供应商管理
  import supply_of_goods from "../lifukang/components/supplier/supply_of_goods";
  import supplier_info_change from "../lifukang/components/supplier/supplier_info_change";
  import supplier_delivery from "../lifukang/components/supplier/supplier_delivery";
  import supply_of_goods_queryAll from "../lifukang/components/supplier/supply_of_goods_queryAll";//供应商查询供应商品
  import Supplier_home_page from "../lifukang/components/supplier/Supplier_home_page";
  //商户管理
  import lablePage from "../caoke/orders/lablePage";
  import file_maintenance from "../caoke/datum/file_maintenance";
  import revenue from "../caoke/statistics/revenue";

  export default {
    name: "Home",
    data() {
      return {
        loading:true,
        topImg:"",
        activeIndex: '',
        childMenus: [],
        childMenus02:[],
        isCollapse: true,
        com: "",
        editableTabsValue: '1',
        editableTabs: [{
          title: '首页',
          name: '1',
          content: ""
        }
        ],
        tabIndex: 1,
        commercialState:sessionStorage.getItem("commercialState"),
        supplierState:sessionStorage.getItem("supplierState")
      }
    },
    components: {
      supply_of_goods,
      supplier_info_change,
      lablePage,
      file_maintenance,
      revenue,
      supplier_delivery,
      supply_of_goods_queryAll,
      Supplier_home_page
    },
    methods: {
      getdata() {
        let users = new URLSearchParams()
        //调用异步，根据id获取用户对象
        this.$axios.get("queryUserById.action/" + sessionStorage.getItem('id'), null).then(response => {
          this.user = response.data;
          console.log(response.data.usersTopImg)
          this.topImg = response.data.usersTopImg

          //追加参数
          if (this.user.phone != '' && this.user.phone != null) {
            users.append("phone", this.user.phone);
          } else {
            users.append("mailAddress", this.user.mailAddress);
          }
          users.append("uPwd", this.user.upwd);

          this.$axios.post("show.action", users).then(request => {
            this.childMenus = request.data
            this.activeIndex = request.data[0].id+''
            this.getmenuid()
          }).catch()
        }).catch();
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
      ,
      addTab(targetName, valuename) {
        var arr = this.editableTabs.find(itme => itme.title == targetName);
        if (arr != null) {
          this.editableTabsValue = arr.name;  //选中
          return;
        }

        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: targetName,
          name: newTabName,
          content: valuename
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      getmenuid(mid){
        this.loading = true;
        let SystemUsers = new URLSearchParams()
      if (sessionStorage.getItem("phone")!=null && sessionStorage.getItem("phone")!="" && sessionStorage.getItem("phone")!=undefined){
        SystemUsers.append("phone",sessionStorage.getItem("phone"))
      }else {
        SystemUsers.append("mailAddress",sessionStorage.getItem("mailAddress"))
      }

        if (mid==undefined && mid==null){
          SystemUsers.append("mid",this.activeIndex)
        }else {
          SystemUsers.append("mid",mid)
        }


        this.$axios.post("useractive.action",SystemUsers).
        then(request=>{
          console.log(request.data)
          this.childMenus02 = request.data
          this.loading = false;
        }).
        catch()
      },
      reft(){
        this.$router.push("/")
      },
      write(){
        sessionStorage.clear();
        this.$message.success("注销成功")
        this.$router.push("/Login")
      },
    },
    created() {
      this.getdata()
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }


  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #545c64;
    text-color: "#fff";
    active-text-color: "#ffd04b";
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .homeWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

</style>
